<template>
    <el-card class="box-card">
      <div class="centent">
         <div class="left">
              <map-drag></map-drag>
         </div>
         <div class="right">
           <div class="bottom_box">
            <el-carousel :interval="4000" indicator-position='none' type="card">
                <el-carousel-item v-for="item in 6" :key="item">
                <h3 text="2xl" justify="center">{{ item }}</h3>
                </el-carousel-item>
            </el-carousel>
           </div>
           <div class="bottom_box" style="marginTop: 10px;height:66%">
               <div class="bottom">
                    <div class="weather-l">
                        <el-image :src="weather_img" />
                    </div>
                   <div class="weather-r" style="margin:0 20px">
                        <p>{{type}} / {{wind}}</p>
                        <p>{{temperature}}</p>
                   </div>
                   <div class="weather-r">
                        <p>气温相较昨日</p>
                        <el-image style="width:20px;height:20px" :src='mean <= 0 ? xia : shang'/><span>{{mean}}℃</span>
                   </div>
               </div>
                <div class="weather-b" ref="weather_b">
                    <my-line
                    :echartStyle="echartsInfo.s"
                    :titleText="echartsInfo.title"
                    :opinion="echartsInfo.barName"
                    :opinionData="echartsInfo.info"
                    :x="echartsInfo.barX"
                    :y="echartsInfo.barY"
                    ></my-line>
                </div>  
           </div>
         </div>
      </div>
    </el-card>
</template>
<script>
import { defineComponent } from 'vue'
import itable from '@/components/table/table.vue';
import mapDrag from '@/components/mapDrag/index.vue';
import { getinfoData, getWeather } from '@/http/api';
import myLine from '@/components/echarts.vue';
export default defineComponent({
    data(){
        return {
            temperature:'',
            type:'',
            weather_img:'',
            ganmao:'',
            wind:'',
            mean:'',
            xia:require('../../../../assets/images/icon_down.png'),
            shang:require('../../../../assets/images/icon_up.png'),
            echartsInfo : {
                s: {
                    height: '500px'
                    },
                    title: '未来5日温度变化趋势',
                    barName: ['高温','低温'],
                    barX: [],
                    barY:[
                        {
                            type: 'value',
                            name: '高温',
                            interval: 50,
                            axisLabel: {
                                formatter: '{value} °C'
                            }
                        },
                        {
                            type: 'value',
                            name: '低温',
                            interval: 5,
                            axisLabel: {
                                formatter: '{value} °C'
                            }
                        }
                    ],
                    info: [
                        {
                            name: '高温',
                            symbol:'none',
                            type: 'line',
                            color: '#c393d1',
                            smooth: true,
                            barWidth : 40,
                            tooltip: {
                                valueFormatter: function (value) {
                                return value + ' °C';
                                }
                            },
                            lineStyle: {
                                normal: {
                                    width:2,
                                    barBorderRadius: 0
                                 }
                            },
                            data: []
                        },
                        {
                            name: '低温',
                            symbol:'none',
                            smooth: true,
                            type: 'line',
                            color: '#40cfb3',
                            yAxisIndex: 1,
                            tooltip: {
                                valueFormatter: function (value) {
                                return value + ' °C';
                                }
                            },
                            lineStyle: {
                                normal: {
                                    width:2,
                                    barBorderRadius: 0
                                 }
                            },
                            data: []
                        }
                    ]
            }
        }
    },
    mounted(){
        getinfoData().then((res) => {
          console.log(res);
        });
        // 项目地址
        getWeather('武汉').then(res => {
            let data = res.data.forecast[0], i=0
            let highData = [], lowData = []
            while(res.data.forecast[i]){
                highData.push(res.data.forecast[i].high.replace("高温 ","").substring(0,2))
                lowData.push(res.data.forecast[i].low.replace("低温 ","").substring(0,2))
                this.echartsInfo.barX.push(this.$moment().add(i, 'days').format('YYYY-MM-DD'))
                i++
            }
            this.echartsInfo.info[0].data = highData 
            this.echartsInfo.info[1].data = lowData
            // 天气温度
            this.temperature = data.low.replace("低温 ","") + ' ~ ' + data.high.replace("高温 ","")
            // 天气类型
            this.type = data.type
            // 天气图片
            this.weather_img = require(`../../../../assets/images/weather/${data.type}.png`)
            // 提示
            this.ganmao = res.data.ganmao
            // 风向
            this.wind = data.fengxiang
            // 温度对比
            this.mean =  res.data.yesterday.high.replace("高温 ","").substring(0,2) - data.high.replace("高温 ","").substring(0,2)
        })
        this.$nextTick(()=>{
           
            this.echartsInfo.s.height = window.getComputedStyle(this.$refs.weather_b).height
            console.log( this.echartsInfo.s.height ,'+999')
        })
    },
    components:{itable, mapDrag, myLine},
})
</script>
<style scoped lang='scss'>
.centent{
    width: 100%;
    height: calc(100vh - 300px);
    display: flex;
    justify-content: space-between;
    .left{
        width: 50%;
        margin-right: 20px;
        border-radius: 20px;
      div{
          padding-bottom: 20px;
      }
    }
    .el-col{
        width: 80px !important;
        height: 80px !important;
    }
    .right{
        width: 50%;
        border-radius: 20px;
        height: calc(100vh - 300px);
        overflow: hidden;
        .bottom_box{
          width: 100%;
          height: 34%;
          background: rgba(235, 235, 235, 0.233);
          border-radius: 20px;
          padding: 0 10px;
                .el-carousel{
                    height: 100%;
                   ::v-deep .el-carousel__container{
                        height: 100% !important;
                    }
                }
        }
        .weather-b{
            width: 100%;
            height: 70%;
            margin-top: 20px;
        }
        .bottom{
            width: 100%;
            display: flex;
            flex: 1;
            padding-top: 10px;
        .weather-l{
            width: 40%;
            border-radius: 10px;
            box-shadow: 0px 8px 8px 0px #c5c5c5;
            display: flex;
            align-items: center;
            justify-content: center;
            .el-image{
                width: 46px;
                height: 46px;
            }
        }
        .weather-r{
            width: 100%;
            text-align: center;
            color: #3b3b3b;
            font-size: 14px;
            font-family:'Helvetica Neue';
            border-radius: 10px;
            box-shadow: 0px 8px 8px 0px #c5c5c5;
            .el-image{
                width: 46px;
                height: 46px;
            }
            span{
                margin-top: 10px;
            }
        }
        }
    }
}
// .el-carousel{
//     margin: 0 10px;
// }
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>